package showcase

import "github.com/templui/templui/internal/components/accordion"

templ AccordionDefault() {
	<div class="w-full max-w-sm">
		@accordion.Accordion(accordion.Props{
			Class: "w-full",
		}) {
			@accordion.Item() {
				@accordion.Trigger() {
					Is it accessible?
				}
				@accordion.Content() {
					Yes. It adheres to the WAI-ARIA design pattern.
				}
			}
			@accordion.Item() {
				@accordion.Trigger() {
					Is it styled?
				}
				@accordion.Content() {
					Yes. It comes with default styles that matches the other components aesthetic.
				}
			}
			@accordion.Item() {
				@accordion.Trigger() {
					Is it animated?
				}
				@accordion.Content() {
					Yes. It is animated by default, but you can disable it if you prefer.
				}
			}
		}
	</div>
}
